<%@page contentType="text/html; charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="zh-CN">

<head>
<meta charset="utf-8">
<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>图书在线首页</title>

	<!-- 引入Bootstrap核心样式文件 -->
	<link href="${pageContext.request.contextPath}/static/front/css/bootstrap.css" rel="stylesheet">

	<!-- 引入jQuery核心js文件 -->
	<script src="${pageContext.request.contextPath}/static/front/js/jquery-1.11.3.min.js"></script>
	<!-- 引入BootStrap核心js文件 -->
	<script src="${pageContext.request.contextPath}/static/front/js/bootstrap.min.js"></script>

	<script src="${pageContext.request.contextPath}/static/back/lib/layui/layui.js" charset="utf-8"></script>
	<link href="${pageContext.request.contextPath}/static/back/lib/layui/css/layui.css" rel="stylesheet">

<<<<<<< HEAD
<style>
.table img {
	height: 120px;
}

.table td {
	vertical-align: middle !important;
}
</style>
=======
	<style>
		.table img {
			height: 120px;
		}

		.table td {
			vertical-align: middle !important;
		}
	</style>
>>>>>>> 180ace60693232df69575b4f82fc34aeb3fc90e8
</head>

<body>
	<!-- 头部页面 -->
	<jsp:include page="header.jsp"/>

	<!-- 主体部分 -->
	<div class="container">
		<!-- 广告 -->
		<div class="row">
			<div class="hidden-md hidden-sm hidden-xs "
				style="padding-left: 14px;">
				<img src="${pageContext.request.contextPath}/static/front/img/ad.jpg "
					style="width: 99%;" />
			</div>
		</div>
		<!-- 订单详情的展示 -->
<<<<<<< HEAD
		<h3>订单详情 <small>&nbsp;&nbsp;&nbsp;&nbsp;编号:${orderDetais[0].orderNumber}</small></h3>
=======
		<h3>订单详情 <small>&nbsp;&nbsp;&nbsp;&nbsp;编号:<span id="orderNumber">${orderDetais[0].orderNumber}</span></small></h3>
>>>>>>> 180ace60693232df69575b4f82fc34aeb3fc90e8
		<table class="table">
			<thead>
				<tr class="active">
					<th colspan="4 ">书籍</th>
					<th>单价</th>
					<th>数量</th>
					<th>小计</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${orderDetais}" var="orderDetail">
					<tr>
						<td><img style="width: 100px;height: 100px"
<<<<<<< HEAD
								src="${pageContext.request.contextPath}/${orderDetail.img}"></td>
=======
								 src="${orderDetail.img}"></td>
>>>>>>> 180ace60693232df69575b4f82fc34aeb3fc90e8
						<td>${orderDetail.bookName}</td>
						<td>${orderDetail.author}</td>
						<td>${orderDetail.publisher}</td>
						<td>${orderDetail.price}</td>
						<td>${orderDetail.numb}</td>
						<td class="total">${orderDetail.total}</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
		<hr />
		<h4>收货人信息</h4>
<<<<<<< HEAD
		<form>
			<div class="row">
				<div class="form-group col-sm-4">
					<label for="email" class="control-label">
						<i class="glyphicon glyphicon-envelope"></i> 收货人邮箱
					</label> 
					<input type="text" class="form-control" name="email" id="email">
=======
		<form method="post" action="${pageContext.request.contextPath}/front/payfororder">
			<input type="hidden" name="orderNumber" value="${orderDetais[0].orderNumber}">
			<div class="row">
				<div class="form-group col-sm-4">
					<label for="phone" class="control-label">
						<i class="glyphicon glyphicon-envelope"></i> 收货人电话
					</label> 
					<input type="text" class="form-control" name="phone" id="phone">
>>>>>>> 180ace60693232df69575b4f82fc34aeb3fc90e8
				</div>
			</div>
			<div class="row">
				<div class="form-group col-sm-4">
					<label for="name" class="control-label">
					<i class="glyphicon glyphicon-user"></i> 收货人姓名</label> 
					<input type="text" class="form-control" name="name" id="name">
				</div>
			</div>
<<<<<<< HEAD
		
=======

			<div class="row">
				<div class="form-group col-sm-4">
					<label for="name" class="control-label">
						<i class="glyphicon glyphicon-user"></i> 收货人地址</label>
					<input type="text" class="form-control" name="address" id="address">
				</div>
			</div>
>>>>>>> 180ace60693232df69575b4f82fc34aeb3fc90e8
		
			<hr />
			<div class="row text-right" style="padding-right: 30px">
				总金额:&yen; <span class="totalmoney">88</span> 点券&nbsp;&nbsp;&nbsp;&nbsp;
<<<<<<< HEAD
				<input type="submit" class="btn btn-primary btn-lg" value="支付订单">
=======
				<input type="submit" class="btn btn-primary btn-lg"  id="submit" value="支付订单">
>>>>>>> 180ace60693232df69575b4f82fc34aeb3fc90e8
			</div>
		</form>
	</div>
	<hr />

	<!--页脚-->
	<div class="container" style="margin-top: 10px;">
		<div class="row">
			<div class="hidden-md hidden-sm hidden-xs "
				style="padding-left: 14px;">
				<img src="${pageContext.request.contextPath}/static/front/img/footer.jpg"
					style="width: 98%;" />
			</div>
		</div>
	</div>
	<hr />

	<!--友情链接和版权信息-->
	<div class="container" style="margin-top: 10px;">
		<div class="row">
			<div class="" align="center">
				<ul class="list-inline">
					<li><a>关于我们</a></li>
					<li><a>联系我们</a></li>
					<li><a>招贤纳士</a></li>
					<li><a>法律声明</a></li>
					<li><a>友情链接</a></li>
					<li><a>支付方式</a></li>
					<li><a>配送方式</a></li>
					<li><a>服务声明</a></li>
					<li><a>广告声明</a></li>
				</ul>
			</div>
			<div
				style="text-align: center; margin-top: 5px; margin-bottom: 20px;">
				Copyright &copy; 2003-2017 书城 版权所有</div>
		</div>
	</div>

</body>
<script>
<<<<<<< HEAD
=======
	var layer;
	layui.use('layer',function () {
		layer = layui.layer;
	})

>>>>>>> 180ace60693232df69575b4f82fc34aeb3fc90e8
	$(function () {
		var sum=0;
		var totals = $(".total");
		for(let i=0;i<totals.length;i++){
			sum+=parseFloat($(totals[i]).html());
		}
		$(".totalmoney").html(sum);
	})
<<<<<<< HEAD
=======

	/*$('#submit').click(function () {
		var orderNumber = $('#orderNumber').text();
		var phone = $('#phone').val();
		var address = $('#address').val();
		var name = $('#name').val();
		var data = {'orderNumber':orderNumber,'phone':phone,'address':address,'name':name}
		console.log(data)

		// 支付订单
		$.ajax({
			url:'${pageContext.request.contextPath}/front/payfororder',
			type:'POST',
			data:data,
			dataType:'JSON',
			success:function (res) {
				layer.msg(res.message)
				if (res.code === 100){
					location.href = '${pageContext.request.contextPath}/front/paySuccess'
				}
			}
		})
	})*/
>>>>>>> 180ace60693232df69575b4f82fc34aeb3fc90e8
</script>

</html>